<template>
  <el-cascader
    ref="elCascader"
    v-bind="$attrs"
    v-model="dataValue"
    :options="options"
    :show-all-levels="false"
    :props="defaultProps"
    style="width: 100%;"
    change-on-select
    @change="valueChange" />
</template>

<script type="text/javascript">
import { jxcProductQueryProductTypeAPI } from '@/api/jxc/product'

export default {
  name: 'ProductType', // 产品分类
  components: {},
  props: {
    value: {
      type: [String, Number, Object, Array],
      default: null
    },
    field: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      options: [],
      dataValue: null,
      defaultProps: {
        children: 'sonList',
        label: 'productTypeName',
        value: 'productTypeId'
      }
    }
  },
  watch: {
    value: {
      handler() {
        if (this.value) {
          this.dataValue = Number(this.value)
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.getProductCategoryIndex()
  },
  methods: {
    /** 获取产品分类数据 */
    getProductCategoryIndex() {
      jxcProductQueryProductTypeAPI({
        type: 'tree'
      }).then(res => {
        this.options = res.data
      }).catch(() => {})
    },

    valueChange(val) {
      this.$emit('change')
      this.$emit('input', val[val.length - 1])
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
